<template>
  <div>
    <Header :left="true" leftText="返回" title="呼叫记录" />
    <!-- 查询条件 -->
    <van-button
      round
      :block="true"
      class="button"
      :hairline="false"
      type="primary"
      color="#138087"
      text="查询"
      @click="showDialog = true"
    />
    <van-dialog
      v-model="showDialog"
      title="查询条件选择"
      show-cancel-button
      confirm-button-text="确认"
      cancel-button-text="取消"
      @confirm="queryTable(0)"
    >
      <Form :style="autoHeight">
        <van-field
          readonly
          clickable
          name="timeStr"
          :value="valueStr"
          label="开始时间"
          placeholder="点击选择日期"
          @click="openStartTime"
        />
        <van-calendar
          v-model="showCalendarStr"
          @confirm="onConfirmStr"
          @closed="startConcel"
          @unselect="startReset"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-field
          readonly
          clickable
          name="timeEnd"
          :value="valueEnd"
          label="结束时间"
          placeholder="点击选择日期"
          @click="openEndTime"
        />
        <van-calendar
          v-model="showCalendarEnd"
          @confirm="onConfirmEnd"
          @unselect="endReset"
          @closed="endConcel"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </Form>
    </van-dialog>
    <!-- 查询条件结束 -->
    <!-- 标签1 -->
    <div>
      <van-row style="margin-top:5px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message">统计</van-col>
      </van-row>
    </div>
    <!-- 标签结束 -->
    <!-- 统计图 -->
    <div
      style="margin-top:10px;border: solid #dcdcdc;
             margin-left: 5px;
             border-top-width: 4px;
             border-left-width: 4px;
             border-right-width: 1px;
             border-bottom-width: 1px;"
    >
      <canvas v-show="chartShow" id="myChart" height="250"></canvas>
    </div>
    <!-- 统计图结束 -->

    <!-- 标签2 -->
    <div>
      <van-row style="margin-top:10px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message">明细</van-col>
      </van-row>
    </div>
    <!-- 标签结束 -->

    <!-- 表格明细展示 -->
    <div class="selectdTextScroll">
      <v-table
        is-horizontal-resize
        style="width:100%;"
        :show-vertical-border="true"
        :columns="columns"
        :table-data="tableData"
        row-hover-color="#eee"
        row-click-color="#edf7ff"
      ></v-table>
    </div>
    <!-- 表格展示结束 -->
    <!-- 分页控件 -->
    <div>
      <van-pagination
        width="this.screenWidth"
        class="pagination"
        force-ellipses
        v-model="queryParams.pageNum"
        :total-items="queryParams.total"
        @change="pgn_change"
        :items-per-page="queryParams.pageSize"
        style="margin-bottom:0px"
      />
    </div>
  </div>
</template>
<script>
import { Icon, Button, CellGroup, Cell, Image as VanImage, Row, Col, Pagination, Field, Calendar, Dialog,Toast } from 'vant'
import { _httpClient } from '@/libs/api'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
import { memory } from '@/libs/utils'
Vue.use(VanImage)
Vue.use(Row)
Vue.use(Col)
Vue.use(Pagination)
Vue.use(Button)
Vue.use(Field)
Vue.use(Calendar)
Vue.use(Dialog)
import { storage } from '@/libs/utils'
import { VTable } from 'vue-easytable'
import F2 from '@antv/f2/lib/index-all'
import 'vue-easytable/libs/themes-base/index.css'
import Header from '@/components/header.vue'
export default {
  name: 'tab2',
  components: { Button, Header, Icon, CellGroup, Cell, Col, VTable, Field, Dialog,Toast },
  data() {
    return {
      chartShow: true, //控制图标是否显示
      user: [], //登录用户信息
      //弹窗高度
      autoHeight: {
        height: '',
      },
      valueStr: '', //开始时间查询条件
      showCalendarStr: false,
      valueEnd: '', //结束时间查询条件
      showCalendarEnd: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 11, 31),
      showDialog: false,

      queryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      tableData: [],
      columns: [
        {
          field: 'seq',
          title: '序号',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'callCode',
          title: '呼叫编号',
          width: 180,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'callType',
          title: '呼叫类型',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'status',
          title: '状态',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'left',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipCode',
          title: '设备编码',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipName',
          title: '设备名称',
          width: 120,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'callTime',
          title: '呼叫时间',
          width: 170,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'callReson',
          title: '呼叫原因',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
      ],
    }
  },
  created: function() {
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get('user'))
    this.queryTable(0)
    //初始化设置弹窗高度
    this.autoHeight.height = '100px'
  },
  mounted() {
    // alert(this.$refs.Calendar)
  },
  methods: {
    //表格查询
    pgn_change() {
      this.queryTable(1)
    },
    //数据查询 type 0 正常查询 1 分页查询
    async queryTable(type) {
      let _this = this
      try {
        // 表格数据
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/my/callRecord/list?pageNum=' +
            _this.queryParams.pageNum +
            '&pageSize=' +
            _this.queryParams.pageSize,
          {
            body: { callUser: _this.user.userName, startTime: _this.valueStr, endTime: _this.valueEnd },
          }
        )
        if (res.code === 200) {
          if (res.rows.length == 0) {
            Toast('无数据');
            return
          }
          _this.tableData = res.rows
          _this.queryParams.total = res.total
          if (type == 0) {
            _this.queryCharData()
          }
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //图表数据查询
    async queryCharData() {
      let _this = this
      try {
        // 表格数据
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/my/callRecord/charMessage', {
          body: { callUser: _this.user.userName, startTime: _this.valueStr, endTime: _this.valueEnd },
        })
        if (res.code === 200) {
          _this.drawChart(res.rows)
          //   if (res.rows.length > 0) {
          //     _this.drawChart(res.rows)
          //     _this.chartShow = true
          //   }
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //统计图绘制
    drawChart(value) {
      const data = value
      var chart = new F2.Chart({
        id: 'myChart',
        width: window.innerWidth,
        pixelRatio: window.devicePixelRatio,
      })

      chart.source(data, {
        // sales: {
        //   tickCount: 5,
        // },
      })

      // 让柱状图的宽度适配不同的屏幕尺寸
      var barWidth = 36 * (window.innerWidth / 375)

      chart
        .interval()
        .position('name*callNum')
        .color('l(90) 0:#1890ff 1:#70cdd0') // 定义柱状图渐变色
        .size(barWidth)

      // 柱形图上文字信息
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.name, obj.callNum],
          content: obj.callNum,
          style: {
            fontFamily: 'charts-icon',
            textBaseline: 'bottom',
            fontSize: 14,
          },
          offsetY: -5,
        })
      })
      chart.render()
    },
    //日期格式化
    formatDate(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mouth + '-' + day
    },
    //清空开始时间
    startReset() {
      this.valueStr = ''
      this.autoHeight.height = '100px'
    },
    //清空结束时间
    endReset() {
      this.valueEnd = ''
      this.autoHeight.height = '100px'
    },

    //开始时间取消
    startConcel() {
      // this.valueStr = ''
      this.autoHeight.height = '100px'
    },
    //结束时间取消
    endConcel() {
      // this.valueEnd = ''
      this.autoHeight.height = '100px'
    },

    //打开开始时间选择
    openStartTime() {
      this.showCalendarStr = true
      this.autoHeight.height = '400px'
    },

    //打开结束时间选择
    openEndTime() {
      this.showCalendarEnd = true
      this.autoHeight.height = '400px'
    },

    //开始时间确定
    onConfirmStr(date) {
      this.valueStr = this.formatDate(date)
      this.showCalendarStr = false
      this.autoHeight.height = '100px'
    },
    //结束时间确认
    onConfirmEnd(date) {
      this.valueEnd = this.formatDate(date)
      this.showCalendarEnd = false
      this.autoHeight.height = '100px'
    },
  },
}
</script>
<style>
body {
  background-color: white;
}
.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.selectdTextScroll {
  display: inline-block;
  /* position: fixed; */
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  height: 240px;
  z-index: 1;
}
.title-cell-class-name-test {
  background-color: #778899;
  color: #fff;
}
.pagination {
  position: fixed;
  bottom: 10px;
  width: 100%;
}
.button {
  /* position: relative; */
  top: 8px;
  left: 75%;
  width: 20%;
  height: 30px;
  background-color: #f22028;
  border-color: #f22028;
}
</style>
